<template>
    <div>
        <div class="radar" ref="radar"></div>
    </div>
</template>

<script>

const charts = require("echarts")
export default {
    data() {
        return {

        }
    },

    methods: {
        fun() {
            const chart = charts.init(this.$refs.radar)
            const option = {
                grid: {
                    position: "left"
                },
                tooltip : {
                //雷达图的tooltip不会超出div，也可以设置position属性，position定位的tooltip 不会随着鼠标移动而位置变化，不友好
                    confine: true,
                    enterable: true, //鼠标是否可以移动到tooltip区域内
                },
                radar: {
                    indicator: [
                        { name: '销售', max: 6500},
                        { name: '管理', max: 16000}, 
                        { name: '信息技术', max: 30000},
                        { name: '客服', max: 38000},
                        { name: '研发', max: 52000},
                        { name: '市场', max: 25000}
                    ],
                    center: ['40%', '50%'],
                    radius: 150,
                    // 雷达图大小的设置
                    shape: "circle",
                },

                series: [
                    {
                        type: "radar",
                        data: [
                            {
                                name: "华为",
                                value: [3000,8000,12000,40000,10000,2000],
                                areaStyle: {
                                    color: "red"
                                }
                            },
                            {
                                name: "中兴",
                                value: [3000,9000,12500,30000,7000,8000],
                                areaStyle: {
                                    color: "blue"
                                }
                            }
                        ],
                        label: {
                            show: false
                        }
                    }
                ]
            }
            chart.setOption(option)
        }
    },

    mounted() {
        this.fun()
    }
}
</script>

<style scoped>
    .radar{
        width: 500px;
        height: 500px;
    }
</style>